<template>
	<view>
		<view class="header">
			<!-- 			<view class="headerLeft" :class="{bg:time == 3}" @click="changebg(3)">
				发布
			</view> -->


		</view>

		<view class="main">
			<input type="text" class="title" placeholder="标题 " v-model="frominfo.title" />

			<textarea class="content" placeholder="岭师论坛为实名社区,以分享校园生活/学习为主,禁止辱骂他人;禁止煽动情绪;不得讨论政治,校务问题;如有违规将通报所在学院.更多规则请查阅论坛规则板块." v-model="frominfo.description"></textarea>
			<!-- 			<view class="upload" @click="addImage">
				<image src="../../static/addd.png" mode=""></image>
			</view> -->
			<!-- 			<uni-section title="只选择图片" type="line" @click="addImage">
				<view class="example-body">
					<uni-file-picker limit="3" title="请上传照片图片"></uni-file-picker>
				</view>@click="ViewImage(i)"
			</uni-section> -->

			<!--！！！！！！！ 上传功能 -->
			<view class="photext">图片上传</view>
			<view style="margin-top: 20rpx;">
				<view class="img" v-for="(item, i) in frominfo.urlList" :key="i">
					<image style="width: 100%;height: 100%;" :src="item"></image>
					<view @click.stop="DelImg(i)" style="display: inline;">
						<uni-icons type="closeempty" class="close" size="20"></uni-icons>
					</view>
				</view>
				<view class="camera" @click="addImage">
					<uni-icons type="camera" size="40"></uni-icons>
				</view>
			</view>


			<!-- 		<view class="classification">
				<view class="classicon">
					<image src="../../static/choose.png" mode=""></image>
				</view>
				<view class="text">
					请选择分类
				</view>
				<view class="righticon">
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view> -->
			
			
<!-- 			<view class="price">
				<view class="classicon">
					<image src="../../static/choose.png" mode=""></image>
				</view>
				<view class="decision">
					定价：
				</view>
				<input type="text" name="" id="" class="inprice" v-model="frominfo.price">
			</view> -->

			<button class="btn" @click="test">提交</button>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
	import {
		apInsertPost
	} from '@/utils/request/api.js'
	import {
		reactive
	} from 'vue'
	export default {
		data() {
			return {
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/goods.png',
						selectedIconPath: '/static/goods.png',
						text: '发布商品',
						active: false
					},
					{
						iconPath: '/static/loveheart2.png',
						selectedIconPath: '/static/loveheart2.png',
						text: '发表白墙',
						active: false
					},
					{
						iconPath: '/static/lost.png',
						selectedIconPath: '/static/lost.png',
						text: '发失物招领',
						active: false
					}
				],
				frominfo: {
					"categoryId": 5,
					"description": "",
					"postType": 4,
					"title": '',
					"uid": "202108764312",
					"urlList": [],
					"price": '',
				},
				time: 3,
				imgList: [],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				}
			}
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		onLoad() {
			
		},
		methods: {
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							if(e.item.text==='发失物招领') {
								uni.navigateTo({
									url:'../lostproperty/lostproperty'
								})
							}else if (e.item.text==='发布商品') {
								uni.switchTab({
									url:'../release/release'
								})
							}else {
								uni.navigateTo({
									url:'../loveWall/loveWall'
								})
							}

						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			fabClick() {
				uni.showToast({
					title: '请选择发布类型',
					icon: 'none'
				})
			},
			switchBtn(hor, ver) {
				if (hor === 0) {
					this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
					this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
				} else {
					this.horizontal = 'right'
					this.vertical = 'bottom'
				}
				this.$forceUpdate()
			},
			switchColor() {
				this.is_color_type = !this.is_color_type
				if (this.is_color_type) {
					this.pattern.iconColor = '#aaa'
					this.pattern.buttonColor = '#fff'
				} else {
					this.pattern.iconColor = '#fff'
					this.pattern.buttonColor = '#007AFF'
				}
			},
			examinationType(e) {
				this.examinationTypeIndex = e.target.value;
				this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
			},
			change(e) {
				console.log("e:", e);
			},
			test() {
				console.log(this.frominfo);
				for (let key in this.frominfo) {
					if (this.frominfo[key] === '' || this.frominfo[key] === []) {
						uni.showToast({
							title: '请填充所有消息',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 1000
						})
					}
				}

				apInsertPost(
					this.frominfo
				).then(res => {
					console.log(res);
					uni.switchTab({
						url: '../index/index'
					})
					uni.showToast({
						title: '成功发送',
						duration: 2000
					})
				}).catch(err => {
					console.log(err);
				})

			},
			changebg(index) {
				if (index === 3 || index === 4) {
					this.time = index
				}
			},
			addImage() {
				const _this = this;

				// 从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					// uni.showLoading({
					// 	mask: true,
					// 	title: '上传中...'
					// }),
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择

					success: (res) => {
						console.log(res);
						uni.previewImage({
							urls: res.tempFilePaths,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
										.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'http://43.138.211.141:9052/api/oss/upload',
							filePath: tempFilePaths[0],
							name: 'multipartFile',
							success: function(uploadFileRes) {
								console.log(uploadFileRes);
								// _this.imgList = [..._this.imgList, uploadFileRes.data]
								_this.frominfo.urlList.push(JSON.parse(uploadFileRes.data).data[0])
								console.log(_this.frominfo.urlList);


							}
						})
					}
				})
			},
			// ViewImage(i) {
			// 	const imgurl = []
			// 	const List = Array.from(this.imgList);
			// 	List.forEach(item => imgurl.push(item.data))
			// 	console.log(imgurl);
			// 	uni.previewImage({
			// 		urls: imgurl,
			// 		current: i
			// 	});
			// },
			DelImg(i) {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {

						// console.log(res);	
						if (res.confirm) {
							console.log(_this.imgList);
							_this.imgList.splice(i, 1)
						}
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.header {
		// display: flex;
		width: 100%;
	}

	.headerLeft {
		display: inline-block;
		width: 50%;
		height: 50px;
		background-color: #f3faff;
		font-size: 20px;
		text-align: center;
		line-height: 50px;
		border-radius: 0 0 20px 0;
	}

	.headerRight {
		display: inline-block;
		width: 50%;
		height: 50px;
		line-height: 50px;
		background-color: #f3faff;
		font-size: 20px;
		text-align: center;
		border-radius: 0 0 0 20px;
	}

	.main {
		margin: 20px 3% 0;
	}

	.title {
		font-size: 20px;
		border-bottom: 2px solid #ccc;
		padding-bottom: 10px;
		text-align: center;
	}

	.content {
		width: 100%;
		height: 230px;
		margin-top: 30px;
		font-size: 16px;
		border-bottom: 2px solid #ccc;
	}

	.upload {
		width: 100px;
		height: 100px;
		background-color: #edeff4;
		margin: 20px 10px;

		image {
			width: 50%;
			height: 50%;
			margin: 20% 20%;
		}
	}

	.classification {
		display: flex;
		width: 100%;
		height: 45px;
		// background-color: #ccc;
		border-radius: 10px;
	}

	.classification:active {
		background-color: #f8f9f9;
	}

	.classicon {
		display: inline-block;
		width: 12%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.text {
		display: inline-block;
		width: 60%;
		height: 100%;
		line-height: 45px;
		font-size: 18px;
		margin-left: 20px;
	}

	.righticon {
		display: inline-block;
		width: 12%;
		height: 100%;

		image {
			width: 90%;
			height: 90%;
			margin-top: 3px;
		}
	}

	.price {
		display: flex;
		width: 100%;
		height: 45px;
		// background-color: #ccc;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.decision {
		display: inline-block;
		// width: 60%;
		height: 100%;
		line-height: 45px;
		font-size: 18px;
		margin-left: 20px;
	}

	.inprice {
		width: 40%;
		height: 100%;
		font-size: 20px;
		// color: #ccc;
	}

	.btn {
		width: 80%;
		height: 40px;
		line-height: 40px;
		background-color: #a0eee1;
		margin: 10%;
		border-radius: 20px;
	}

	.bg {
		background-color: #fff;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}

	/* 
		宽高自行调节
		因为锁定了图片的宽高所以上传的图片展示在页面上可能会变形，这个希望大神来个可行方案
	*/
	.img {
		position: relative;
		display: inline-block;
		width: 166rpx;
		height: 166rpx;
		vertical-align: top;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.close {
		position: absolute;
		right: 0;
		background-color: rgba(0, 0, 0, .4);
		color: #fff;
	}

	.camera {
		display: inline-block;
		width: 166rpx;
		height: 166rpx;
		text-align: center;
		line-height: 166rpx;
		font-size: 46rpx;
		border: 1rpx dotted #8C9697;
		color: #8C9697;
		margin-bottom: 10rpx;
	}

	.photext {
		margin-top: 15px;
		font-size: 18px;
		font-style: italic;
		color: black;
		font-weight: 500;
	}

	.sele {
		font-size: 18px;
	}

	.real {
		font-size: 20px;
	}

	.warp {
		padding: 10px;
	}

	.button {
		margin-bottom: 10px;
	}
</style>
